<template>
  <!-- https://file.moyublog.com/d/file/2023-12-20/04c67308f22241038af277bcfa1fdf1b.jpg 全局搜索后注意替换 -->
  <div class="landscape">
    <div class="nav_bar">
      <div class="back_btn flex flex-justify-center flex-items-center" @click="back">
        <van-icon name="arrow-left" size="16px" color="#393939" />
      </div>
      <div class="address flex flex-justify-left flex-items-center">
        <img src="https://jwc-static.jdwxk.com/imgs/map/position_icon.png" alt="">
        <span>{{ state.position.name }}</span>
      </div>
      <div class="user flex flex-justify-center flex-items-center">
        <div class="avatar">
          <img src="https://jwc-static.jdwxk.com/imgs/map/head_man.png" alt="">
        </div>
        <div class="name">
          {{ userInfo.name }}
        </div>
      </div>
      <div class="points">
        {{ userInfo.score }}
      </div>
    </div>

    <div class="map">
      <img src="https://jwc-static.jdwxk.com/imgs/map/map_bg.png" alt="" srcset="">
    </div>

    <div class="hover_btns">
      <div class="btn card_btn flex-col-1 flex flex-col flex-justify-center flex-items-center" @click="openCardAlbum">
        <img src="https://jwc-static.jdwxk.com/imgs/map/cards_icon.png" alt="" srcset="">
        <span>集卡册</span>
      </div>
      <div class="btn flex-col-1 ar_btn flex flex-col flex-justify-center flex-items-center" @click="replaceLink">
        <img src="https://jwc-static.jdwxk.com/imgs/map/ar_icon.png" alt="" srcset="">
        <span>AR扫码</span>
      </div>
    </div>

    <div class="PT_layer">
      <div
        v-for="item in state.points_location" :key="item.guid" class="PT_layer_item"
        :style="{ left: `${item.x}%`, bottom: `${item.y}%` }" @click="openPTIntro(item)"
      >
        <!-- <img src="https://jwc-static.jdwxk.com/imgs/map/PT_selected.png"> -->
        <img :style="{ width: item.w, height: item.h }" :src="baseUrl + item.img" alt="">
      </div>
    </div>

    <PTIntro ref="PTIntroRef" />
    <CardAlbum ref="CardAlbumRef" />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import PTIntro from './PT_intro/index.vue'
import CardAlbum from './CardAlbum/index.vue'
import { useUserStoreWidthOut } from '@/store/modules/user'

// map event

const baseUrl = import.meta.env.VITE_PUBLIC_PATH

const router = useRouter()
function back() {
  router.back()
}
function replaceLink() {
  // router.replace('/ar/index')
  router.push({ name: 'Ar' })
}

const state = reactive({
  position: {
    name: '景坞村',
  },
  // user: {
  //   sex: 1,
  //   name: '李云龙',
  //   points: 60,
  // },
  points_location: [],
})

async function getPointLocation() {
  state.points_location = [
    {
      guid: '123',
      x: '15',
      y: '41',
      img: 'imgs/map/point_treasureHunt.png',
      w: '65px',
      h: '53px',
      name: '知青寻宝',
      type: 5,
      distance: '',
      intro: '知青陈列馆除了饱含历史记忆的老物件之外，还有丰富的虚拟“宝藏”哦！请您扫描二维码进入游戏界面，通过AR扫描门楣“知青陈列馆”，激活游戏，并根据寻宝清单，AR扫描陈列室内相应物品，获取相应工分或游戏道具。游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '17',
      y: '25',
      img: 'imgs/map/point_guidance.png',
      w: '59px',
      h: '63px',
      name: 'AR 扫知青广场的人引导到地点',
      type: 6,
      distance: '',
      intro: '知青种子计划-神秘种子正在发芽，猜猜你能种出什么农产品',
    },
    {
      guid: '124',
      x: '13',
      y: '10',
      img: 'imgs/map/point_known2.png',
      w: '55px',
      h: '63px',
      name: '“劳动最光荣，奋斗正当时！”',
      type: 4,
      distance: '',
      intro: '请您扫描二维码进入游戏界面，通过AR扫描雕塑群获取农作物清单，并前往交互机前指定位置，在规定时间内根据提示做出耕耘动作，获取工分和农产品卡片。游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '35',
      y: '0',
      img: 'imgs/map/point_collectCard.png',
      w: '212px',
      h: '71px',
      name: '绘梦空间',
      type: 5,
      distance: '',
      intro: '墙绘是兼具艺术性与人文性的新农村风景线。请您扫描二维码进入游戏界面，通过AR扫描知青文化长廊墙绘，一墙一码，解锁不同卡片，获取相应工分和18个游戏道具。游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '43',
      y: '38',
      img: 'imgs/map/point_known.png',
      w: '55px',
      h: '76px',
      name: '活力天地',
      type: 4,
      distance: '',
      intro: '“锻炼身体，建设祖国！”请扫描二维码进入游戏界面，通过跟随数字交互机上界面图示和说明，做相应体育动作，挥洒汗水，强身健体，并获取相应工分。游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '50',
      y: '35',
      img: 'imgs/map/point_jigsaw.png',
      w: '86px',
      h: '59px',
      name: '竹扇秘境',
      type: 3,
      distance: '',
      intro: '景坞村是鄣吴竹扇的起源地，鄣吴竹扇制作技艺是浙江省省级非遗，选材讲究，工艺精湛，品质高雅。请您扫描二维码进入游戏界面，通过AR扫描的形式，进入鄣吴竹扇拼图小游戏，按界面要求完成拼图游戏，获取相应工分。让我们在游戏中体验鄣吴竹扇的文化底蕴，训练我们的大脑吧！游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '60',
      y: '18',
      img: 'imgs/map/point_idiom.png',
      w: '80px',
      h: '44px',
      name: '智趣法治',
      type: 2,
      distance: '',
      intro: '本游戏结合古代法治典故，设置了6个答题小游戏，让您在获得法治知识的同时，享受欢乐趣味。请您扫描二维码进入游戏界面，进行AR实景识别，进入答题环节，完成作答并获取相应工分。游戏结束后，您可使用游戏道具布置您的知青屋。',
    },
    {
      guid: '124',
      x: '72',
      y: '27',
      img: 'imgs/map/point_enter.png',
      w: '59px',
      h: '83px',
      name: '入口易拉宝',
      type: 1,
      distance: '',
      intro: '入口-欢迎来到景坞村沉浸式数字体验‌',
    },
    {
      guid: '124',
      x: '72',
      y: '0',
      img: 'imgs/map/point_groupPhoto.png',
      w: '60px',
      h: '58px',
      name: '时光印记',
      type: 7,
      distance: '',
      intro: '经过一天的知青文化体验，“寻梦知青·沉浸时光漫游”之旅即将接近尾声。请您通过首页进入AR合影界面，选择自己喜欢的背景，将游戏所获道具放置到相应位置，制作专属自己的知青屋，记录独属于自己的印记吧。‌',
    },
  ]
  // const res = await getMapPosition()
  // console.log('getPointLocation', res)
  // state.points_location = res.data.records
}
const PTIntroRef = ref()
function openPTIntro(item) {
  PTIntroRef.value.open(item)
}
const CardAlbumRef = ref()
function openCardAlbum() {
  CardAlbumRef.value.open()
}

/**
 * 禁止页面自带缩放
 */
function preventPinchZoom() {
  const touchStartHandler = (event) => {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  }

  const touchMoveHandler = (event) => {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  }

  document.addEventListener('touchstart', touchStartHandler, { passive: false })
  document.addEventListener('touchmove', touchMoveHandler, { passive: false })

  return () => {
    document.removeEventListener('touchstart', touchStartHandler)
    document.removeEventListener('touchmove', touchMoveHandler)
  }
}
const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)
const token = computed(() => userStore.getToken)

onMounted(async () => {
  preventPinchZoom()
  await getPointLocation()
  // getInfo()
  await userStore.GetUserInfo()
  console.log('userInfo', userInfo)
  console.log('token', token)
})
onUnmounted(() => {
  preventPinchZoom()
})
</script>

<style lang="less" scoped>
.landscape {
  transform: rotate(90deg);
  transform-origin: 50vw 50vw;
  width: 100vh;
  height: 100vw;
  box-sizing: border-box;
  border: 1px solid #ffaa00;
  overflow: hidden;

  .nav_bar {
    background: url('https://jwc-static.jdwxk.com/imgs/map/map_navBar_bg.png');
    width: 100vh;
    height: 55px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    color: #663c2a;

    .back_btn {
      width: 40px;
      height: 40px;
      position: absolute;
      z-index: 101;
      left: 0px;
      top: 0px;
    }

    .address {
      position: absolute;
      z-index: 101;
      left: 40px;
      top: 0px;
      height: 40px;
      width: 80px;
      gap: 4px;
      font-weight: 900;

      img {
        width: 12px;
        height: 14px;
      }
    }

    .user {
      position: absolute;
      z-index: 101;
      right: 130px;
      top: 3px;
      gap: 6px;
      font-weight: 900;

      .avatar {
        width: 31.5px;
        height: 31.5px;
        background-color: #f7eed9;
        border-radius: 31.5px;
      }
    }

    .points {
      position: absolute;
      color: #f78c0a;
      font-weight: 700;
      font-size: 12px;
      z-index: 101;
      right: 15px;
      top: 3px;
      width: 85px;
      height: 31.5px;
      padding: 5px 5px 5px 28px;
      line-height: 20px;
      text-align: center;
      background: url(https://jwc-static.jdwxk.com/imgs/map/points_bg.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .map {
    width: 100vh;
    height: 100vw;
    // height: calc(100vw);
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 99;

    img {
      width: 100vh;
      height: 100vw;
    }
  }

  .hover_btns {
    .btn {
      width: 48px;
      height: 48px;
      background-color: rgba(255, 255, 255, 0.8);
      position: absolute;
      right: 48px;
      z-index: 102;
      border-radius: 6px;
      color: #333333;
      font-size: 10px;

      img {
        width: 23px;
        height: 23px;
      }
    }

    .card_btn {
      top: 80px;
    }

    .ar_btn {
      top: 146px;
    }
  }

  .PT_layer {
    width: 100vh;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;

    .PT_layer_item {
      position: absolute;

      img {
        width: 31px;
        height: 36.5px;
      }
    }
  }
}
</style>
